
<div class="row">
            <div class="col-md-6">
		<!-- Section new group -->
                <section class="widget">
                    <header>
                        <h4>
                            <i class="eicon-list-add"></i>
                            Agregar  
                            <small>
                                grupo
                            </small>
                        </h4>
                    </header>
                    <div class="body text-align-center" >
                        <table style="width: 100%;">
			    <tr>
				<td><label style="margin-left: 15px; margin-top: 5px;">Nombre del Grupo:</label></td>
				<td><input style="margin-left: 15px;" type="text" id="nameGroup"></td>
				<td>
				    <button style="margin-left: 15px;" id="btnAddGroup" type="button" class="btn btn-success">
                                        Agregar
                                    </button>
				</td>
			    </tr>
			    <tr>
				<td colspan="3">
				    <br>
				    <div class="alert alert-danger" style="display: none;" id="addgroupName">
					<strong>Problemas!</strong>.
				    </div>
				</td>
			    </tr>
			</table>
                    </div>
                </section>	       
	       
                <!--#region grupos -->
                <section class="widget">
                    <header>
                        <h4>
                            <i class="fa fa-group"></i>
                            Mis  
                            <small>
                                grupos
                            </small>
                        </h4>
                    </header>
                    <div class="body text-align-center" >
                        
                        <div>
                            <!-- Grupos -->
                            <?php
                            if(isset($groups['groups']) )
                            {
                              
                            ?>
                            <table class="table table-striped" id="tableGeneral">
                              <thead>
                              <tr>
                                  <th style="text-align: center"><strong>Nombre</strong></th>
				  <th style="text-align: center"><strong>Usuarios</strong></th>
				  <th style="text-align: center"><strong>Limite</strong></th>
				  <th style="text-align: center; width: 35px;"></th>
                              </tr>
                              </thead>
                              <tbody>
                              <?php
			      
                              foreach($groups['groups'] as $g)
                              {
                                    echo '<tr>';
                                    echo '<td style="text-align: left">'.$g['gpoName'].'</td>';
                                    echo '<td>'.$g['gpoCant'][0]['cant'].'</td>';
                                    echo '<td>'.$g['gpoMaxCompetitors'].'</td>';
				    echo '<td><i class="fa fa-edit" style="color: yellow; cursor: pointer;" onClick="loadPart(\''.$g['gpoName'].'\','.$g['gpoId'].','.$g['gpoCant'][0]['cant'].','.$g['gpoMaxCompetitors'].')"></i></td>';
                                    echo '</tr>';
                              }
                              ?>
                              </tbody>
                            </table>
                            
                            <?php
                            }
                            else
                            {
                              echo '
                                  <div class="alert alert-error">
                                      No tienes grupos disponibles.
                                  </div>
                                  ';
                            }
                            ?>
                          <!-- -->  
                        </div>
                    </div>
                </section>
		
		<!--#region grupos -->
                <section class="widget" id="invitation_group" style="display: none;">
                    <header>
                        <h4>
                            <i class="fa eicon-list-add"></i>
                            Invitacion para unirse a    
                            <small id="gpoEditName">
                                grupos
                            </small>
                        </h4>
                    </header>
                    <div class="body text-align-center" >
                        <div style="width: 100%; padding-left: 60%;">
			    <section style="background: #618fb0; width: 200px; height: 30px; padding-top: 5px;">
				    <div class="facebook-login">
					<a href="#" style="color: inherit; text-decoration: none;" onclick="getFriends()"><span><i class="fa fa-facebook-square fa-lg"></i> Invita a tus amigos</span></a>
				    </div>
			    </section>
                        </div>
			<br>
			<div id="friendListInvitation" style="max-height: 250px; overflow-x:hidden; overflow-y:scroll; text-align: left;">
			    
			</div>
                    </div>
                </section>
            </div>
            
            <div class="col-md-6">
               
               <!--#region resultados -->
                <section class="widget" id="detailGroup" style="display: none;">
                    <header>
                        <h4>
                            <i class="fa fa-file-text"></i>
                            Grupo 
                            <small id="groupName"></small>
                        </h4>
                    </header>
                    <div class="body text-align-center">
                        <table class="table table-striped" id="tableUsers" style="width: 100%">
                              <thead>
                              <tr>
				  <th style="width: 10%;"></th>
                                  <th style="text-align: center; width: 35%;"><strong>Nombre</strong></th>
				  <th style="text-align: center; width: 35%;"><strong>Correo</strong></th>
				  <th style="text-align: center; width: 10%;"><strong>Estado</strong></th>
				  <th style="text-align: center; width: 20%;"></th>
                              </tr>
                              </thead>
                              <tbody>
			      </tbody>
			</table>
                       
                    </div>
                </section>
            </div>
</div>
</div>


<!-- Modal Profile -->
    
<div id="myUser" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
	<div class="modal-content">

	    <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
		<h3>Activar / Desactivar usuario</h3>
	    </div>
	    <div class="modal-body">
		
		<div class="alert alert-danger" id="box_msj_error" style="text-align: center;">
		   ¿Esta seguro de cambiar es estado del usuario seleccionado?
		</div>
		    
	    </div>
	    <div class="modal-footer">
		<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
		<button class="btn btn-info" id="btn_ssave" href="#">Guardar</button>
	    </div>

	</div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- -->

<script>
    var gpoSelected = 0;
    var gpoName = "";
    var accion;
    var idUsrGpo  = 0;
    var actual = 0;
    var maximo = 0;
    
    $(document).ready(function(){
        $("#btnAddGroup").click(function(){
	    if ($("#nameGroup").val() != "") {
		$('#btnAddGroup').attr('disabled',true);
		var data_ajax={
			type: 'POST',
			url: "<?php echo base_url(); ?>user/validateNewGroup",
			data: { group: $("#nameGroup").val() },
			success: function( data ) {
				switch (data) {
				    case 0:
					//Error
					$("#addgroupName").html("<strong>Problemas!</strong> Error al registrar el grupo.");
					$("#addgroupName").show('slow');
					setTimeout("$('#addgroupName').hide('slow');", 4000);
					break;
				    case 1:
					//Ok
					$("#nameGroup").val('');
					//reload
					break;
				    case 2:
					//Duplicado
					$("#addgroupName").html("<strong>Problemas!</strong> Este nombre ya esta en uso.");
					$("#addgroupName").show('slow');
					setTimeout("$('#addgroupName').hide('slow');", 4000);
					break;
				}
				$('#btnAddGroup').removeAttr('disabled');
			    },
			error: function(){
				alert("error");
				$('#btnAddGroup').removeAttr('disabled');
			    },
			dataType: 'json'
			};
		$.ajax(data_ajax);
	    }
	});
	
    var soloAlfanumerico = {
	valor: function (str) {
	    if (str.match(/[^0-9A-Za-z]/g)) {
		str = str.replace(/[^0-9A-Za-z]/g, '');
	    }
	    return str;
	}
   }
   
   $("#nameGroup").keyup(function () {
    this.value = soloAlfanumerico.valor(this.value);
   });
    
    
    });
    
    function loadPart(name, id, act, max)
    {
	$('#tableUsers').css("display", "none");
	$("#groupName").html(name);
	$("#gpoEditName").html(name + "  <small>("+ (max-act) + " cupos disponibles)</small>" );
	$('#tableUsers tbody').html('');
	$('#friendListInvitation').html('');
	gpoSelected = id;
	gpoName = name;
	actual = act;
	maximo = max;
	   
	var data_ajax={
			type: 'POST',
			url: "<?php echo base_url(); ?>user/get_users_by_group",
			data: { gpo: id },
			success: function( data ) {
						    if(data != 0)
						    {
							 var fila = "";
							 $.each(data, function(k,v){							 
							   
							    fila = "<tr>";
							    //imagen
							    fila += '<td><img src="'+v['pictureUrl']+'" height="30" width="30" class="pull-left img-circle"></td>';
							    //nombre
                                                            if (v['usrCompletName'] != "" && v['usrCompletName'] != undefined) {
                                                                fila += "<td style=\"text-align: left\">"+v['usrCompletName']+"</td>";
                                                            }else{
                                                                fila += "<td style=\"text-align: left\">"+v['usrName']+"</td>";
                                                            }
							    //mail
							    fila += "<td style=\"text-align: left\">"+v['usrMail']+"</td>";
							    //estado
							    switch(v['gpousrStatus'])
							    {
								case 'AC':
								    fila += '<td style=\"text-align: center\"><span class="label label-success" title="Activo">A</span></td>';
								    fila += '<td><i class="fa eicon-cancel" style="color:#da461d;cursor: pointer;" title="Desactivar" width="30" onClick="desactivar('+v['gpousrId']+')"></i></td>';
								    break;
								
								case 'IN':
								    fila += '<td style=\"text-align: center\"><span class="label label-danger" title="Inactivo">I</span></td>';
								    fila += '<td><i class="fa fa-check" style="color:#56bc76;cursor: pointer;" title="Activar" width="30" onClick="activar('+v['gpousrId']+')"></i></td>';
								    break;
							    }
							    
							    fila += "</tr>";
							    //v['gpousrId'];							   						    
							   
							    $('#tableUsers tbody').append(fila);
							 });
							 
						    }
						$('#tableUsers').css("display", "block");
			},
			error: function(){
				//$('#tableUsers').css("display", "none");
				$('#error_msj').html('<strong>Ocurrio un error, intente nuevamente la acción.</strong>');
			    },
			dataType: 'json'
			};
	$.ajax(data_ajax);
			    
	$("#detailGroup").css("display", "block");
	$("#invitation_group").css("display", "block");
    }
    
    function desactivar(id)
    {
	accion = 0;
	idUsrGpo = id;
	$("#myUser").modal('show');
    }
    
    function activar(id)
    {
	accion = 1;
	idUsrGpo = id;
	$("#myUser").modal('show');
    }
    
    $('#btn_ssave').click(function(){
	$('#btn_ssave').attr('disabled',true);
	var data_ajax={
			type: 'POST',
			url: "<?php echo base_url(); ?>user/set_user_status",
			data: { id: idUsrGpo, status: accion },
			success: function( data ) {
				if (data == true) {
				    $("#myUser").modal('hide');
				    $('#btn_ssave').removeAttr('disabled');
				    //reload section
				    loadPart(gpoName, gpoSelected, actual, maximo);
				}
			    },
			error: function(){
				alert("error");
				$('#btn_ssave').removeAttr('disabled');
			    },
			dataType: 'json'
			};
	$.ajax(data_ajax);
    });
    
    function getFriends()
    {
	$("#friendListInvitation").html('');
	var data_ajax={
			type: 'POST',
			url: "<?php echo base_url(); ?>user/getFriends",
			success: function( data ) {
			    if (data != false) {
				    var id = "";
				    var name = "";
				    var picture = "";
				    var contentDiv = '<ul class="news-list">';
				    
				    $.each(data, function(i,j){
					$.each(j, function(z,v){
					    if (v['picture'] != undefined) {
						    contentDiv += '<li>';
						    contentDiv += '<img src="'+v['picture']['data']['url']+'" alt="" class="pull-left img-circle">';
						    contentDiv += '<div class="news-item-info">';
						    contentDiv += '<div class="name"><a href="#">'+v['name']+'</a></div>';
						    //contentDiv += '<div class="position">'+v['id']+'</div>';
						    contentDiv += '</div>';
						    contentDiv += '<button type="button" class="btn btn-primary pull-right" style="margin-right: 15px;" onClick="sendInvitation('+v['id']+')">Invitar</button>';
						    contentDiv += '</li>';
						}
					    });
				    });
				    contentDiv += '</ul>';
				    $("#friendListInvitation").html(contentDiv);
				}
			    },
			error: function(){
				alert("error facebook");
			    },
			dataType: 'json'
			};
	$.ajax(data_ajax);
    }
    
    function sendInvitation(id)
    {
	if ((maximo - actual) > 0) {
	    var data_ajax={
			    type: 'POST',
			    url: "<?php echo base_url(); ?>user/setInvitation",
			    data: {gpoId: gpoSelected, fbId: id},
			    success: function( data ) {
				if (data != false) {
					alert("ok");
				    }
				},
			    error: function(){
				    alert("error facebook");
				},
			    dataType: 'json'
			    };
	    $.ajax(data_ajax);
	}
	else
	{
	    alert("no hay cupo");
	}
    }
    
</script>